<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>{$theCate['name']}</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<include file="public/comm" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav fs_xl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left fs_xxi"></a>
		    <h1 class="mui-title fs_xl">{$theCate['name']}</h1>
		</header>
		<include file="public/bottom_nav" />
		<div class="bx_check fs_m"><if empty($categoryname)>全部<else>{$categoryname['title']}</else></if><i class="mui-icon iconfont icon-sanjiaoxing-copy-copy fs_xi"></i></div>
		<div class="bx_box">
			<div class="bx_xz fs_s cls">
				<ul>
					<if empty($categoryname)>
						<foreach name="categorylist" item="vo" key="k">
							<li>
								<a href="{:U('Cellar/category',array('type'=>$theCate['type'],'id'=>$vo.id))}" class=""><em class="fs_xs">{$vo.title}</em></a>
							</li>						
						</foreach>
					<else>
						<foreach name="categorylist" item="vo" key="k">
							<li <if $categoryname['id']==$vo.id>class="bx_right"</if> >
								<a href="{:U('Cellar/category',array('type'=>$theCate['type'],'id'=>$vo.id))}" class=""><if $categoryname['id']==$vo.id><i class="mui-icon mui-icon-checkmarkempty fs_xi"></i></if><em class="fs_xs">{$vo.title}</em></a>
							</li>						
						</foreach>
						<li>
							<a href="{:U('Cellar/category',array('type'=>$theCate['type']))}" class=""><em class="fs_xs">全部</em></a>
						</li>
					</else>	
					</if>
					
				</ul>
			</div>
			<div class="bx_bl"></div>
		</div>
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper bjxx fs_xl">
			<div class="mui-scroll fs_xl pr_m">
				<ul class="mui-table-view mui-table-view-chevron fs_xl" style="margin-bottom: 0.5em;">
					<foreach name="goodslist" item="vo" key="k">
						<li class="mui-table-view-cell fs_xl cls">
							<a class="fs_xl" id="goodinfo" href="{:U('Cellar/goodsInfo',array('id'=>$vo.goods_id))}">
								<div class="pr_info fs_xl fr">
									<p class="fs_m">{$vo.goods_name}</p>
									<p class="fs_xs"><i class="mui-icon iconfont icon-huangye_dianpumingcheng fs_xl"></i><em>{$vo.suppliers_name}</em></p>
									<p class="fs_m">
										<foreach name="vo.cellartype" item='v' key='kk'><span class="span1 fs_xxs">{$v.title}</span></foreach>
									    <foreach name="vo.aroma" item='v' key='kk'><span class="span2 fs_xxs">{$v.title}</span></foreach>	
									</p>
									<p class="fs_m"><span class="span3 fs_xl">¥{$vo.shop_price}</span><span class="span4 fs_xxs">{$vo.sales_sum}坛已售</span></p>
								</div>
								<div class="pr_img fs_xl fl">
									<img src="{$vo.original_img}" />
								</div>
							</a>
						</li>
					</foreach>
				</ul>
			</div>
		</div>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
//					down: {
//						callback: pulldownRefresh
//					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			var count = 0;
			var pagesum = {$pagesum};
			var limit = {$limit};
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > pagesum)); //参数为true代表没有更多数据了。
					getdatas('pullRefresh',limit*count);
				}, 1500);
			}
			
			function getdatas(mod,start){
				var type = {$type};
				var id = {$id};
				$.post("{:U('Cellar/category')}",{'start':start,'type':type,'id':id},function(content){
					if(content.status == 1){
						if(mod != 'pullRefresh'){
							$("#goodslist").html(" ");//重置数据
						}
						var table = document.body.querySelector('.mui-table-view');
 						pagesum = content.pagesum;
                        $.each(content.data, function(i,goods) {
							var li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '<a class="fs_xl" href="/Mobile/Cellar/goodsInfo/id/'+goods.goods_id+'">'+'<div class="pr_info fs_xl fr">'+
							'<p class="fs_m">'+goods.goods_name+'</p>'+
							'<p class="fs_xs">'+'<i class="mui-icon iconfont icon-huangye_dianpumingcheng">'+'</i>'+'<em>'+'</em>'+goods.suppliers_name+'</p>'+
							'<p class="fs_m">'+'<span class="span1 fs_xxs">'+goods.cellartype[0].title+'</span>'+'<span class="span2 fs_xxs">'+goods.aroma[0].title+'</span>'+'</p>'+
							'<p class="fs_m">'+'<span class="span3 fs_xl">¥'+goods.shop_price+'/'+'</span>'+'<span class="span4 fs_xxs">'+goods.sales_sum+'坛已售'+'</span>'+'</p>'+
							'</div>'+
							'<div class="pr_img fs_xl fl">'+'<img src="'+goods.original_img+'" />'+'</div>'+
							'</a>';
							table.appendChild(li);
                        });
                        $(".mui-pull").show();
					}
					else{
						if(mod != 'pullRefresh'){
						   $("#goodslist").html("<center>暂无相关商品</center>");
						   $(".mui-pull").hide();
						}
					}
				},'json');
				
			}

			$(function(){
				var bx_top=$(".bx_check").height()+$("header").height();
				$(".bx_box").height($(window).height()-$(".bx_check").height()-$("header").height());
				$(".bx_box").css("top",bx_top);
				$(".bx_check").click(function() {
					if($(".bx_check i").hasClass("icon-sanjiaoxing-copy")){
						$(".bx_box").show();
						$(".bx_check i").removeClass("icon-sanjiaoxing-copy");
					}else{
						$(".bx_box").hide();
						$(".bx_check i").addClass("icon-sanjiaoxing-copy");
					}
				});
				$(".bx_xz li").click(function(){
					if($(this).find("i").length<=0){
						$(this).addClass("bx_right").siblings().removeClass("bx_right");
						$(this).find("a").prepend('<i class="mui-icon mui-icon-checkmarkempty fs_xi"></i>');
						$(this).siblings().find("i").remove();
					}
				});
				$(".bx_bl").height($(".bx_box").height()-$(".bx_xz").height());
				$(".bx_bl").click(function(){
					$(".bx_box").hide();
					$(".bx_check i").addClass("icon-sanjiaoxing-copy");
				});
				$(".pr_m").on('tap',"li",function() {
  					var sur=$(this).find("a").attr("href");
  					mui.openWindow({
    					url: sur
  					});
				});
			})
		</script>
	</body>

</html>